<template>
  <div class="app_index">
    <!--顶部导航-->
    <div class="top">
      <div class="top_con">
        <el-space class="space_top" :size="2">
          <span class="sp_1" v-if="$store.state.isLogin">Hi,{{ $store.state.phone }}</span>
          <span v-if="isLogin">欢迎光临！</span>
          <span class="sp_2" @click="login" v-if="!$store.state.isLogin">登录</span>
          <span class="sp_2" @click="logout" v-if="$store.state.isLogin">退出</span>
          <span class="sp_3">成为会员</span>
          <span class="sp_4" @click="toMy">个人中心</span>
        </el-space>
      </div>
    </div>
    <div class="main">
      <div class="img_left" @click="toHome">
        <el-image src="http://img61.ddimg.cn/upload_img/00405/y/360-100LOGOewm5.jpg" :fit="contain"></el-image>
      </div>
      <div class="search">
        <div class="inp">
          <input type="text" v-model="queryInfo" />
          <div class="right" @click="save">
            <span class="iconfont icon-sousuo"></span>
          </div>
        </div>
        <div class="cartOrder">
          <el-space class="left" :size="6" @click="toCart">
            <span class="iconfont icon-cart"></span>
            <span>购物车</span>
            <span>0</span>
          </el-space>
          <div class="right" @click="toOrder">
            <span>我的订单</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Login v-model:visible="visible" @done="done" />
</template>

<script>
import Login from './login'
export default {
  name: 'top-header',
  components: {
    Login,
  },
  data() {
    return {
      // 搜索内容
      queryInfo: null,
      visible: false,
      isLogin: null,
      phone: null,
    }
  },
  mounted() {
    // window.addEventListener('setItem', this.printLog)
  },
  methods: {
    toHome() {
      let routeUrl = this.$router.resolve({
        path: '/',
      })
      window.open(routeUrl.href, '_blank')
    },
    toCart() {
      let routeUrl = this.$router.resolve({
        path: '/cart',
      })
      window.open(routeUrl.href, '_blank')
    },
    toMy() {
      let routeUrl = this.$router.resolve({
        path: '/my',
      })
      window.open(routeUrl.href, '_blank')
    },
    toOrder() {
      let routeUrl = this.$router.resolve({
        path: '/order',
      })
      window.open(routeUrl.href, '_blank')
    },
    login() {
      this.visible = true
    },
    logout() {
      // window.sessionStorage.removeItem('token')
      // window.sessionStorage.setItem('isLogin', false)
      this.$store.commit('update', false)
      window.sessionStorage.setItem('isLogin', false)
    },
    done() {
      this.visible = false
    },
    save() {
      console.log(this.queryInfo)
    },
  },
}
</script>

<style scoped lang="scss">
.app_index {
  width: 100%;
  border-bottom: 3px solid #ff2832;
  margin-bottom: 20px;
  padding-bottom: 10px;
  .top {
    height: 34px;
    width: 100%;
    background: #f9f9f9;
    border-bottom: 1px solid #f2f2f2;
    .top_con {
      @include margin(1200px);
      height: 100%;
      .space_top {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        .sp_1 {
          color: #ff2832;
          // font-family: Arial;
          font-weight: bold;
        }
        .sp_2 {
          color: #ff2832;
          cursor: pointer;
        }
        .sp_3 {
          cursor: pointer;
          padding-right: 10px;
          border-right: 1px solid #e6e6e6;
          margin-right: 10px;
        }
        .sp_4 {
          cursor: pointer;
        }
      }
    }
  }
  .main {
    @include margin(1200px);
    display: flex;
    height: 100px;
    // align-items: center;
    .img_left {
      cursor: pointer;
      width: 342px;
      height: 77px;
      align-self: flex-start;
      .el-image {
        height: 100%;
        width: 100%;
      }
    }
    .search {
      height: 40px;
      width: 1122px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .inp {
        height: 100%;
        width: 620px;
        border: 2px solid #ff2832;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        input {
          border: none;
          outline: none;
          height: 100%;
          width: 568px;
          text-indent: 6px;
          font-size: 16px;
        }
        .right {
          height: 100%;
          background: #ff2832;
          width: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .icon-sousuo {
            font-size: 26px;
            color: #fff;
            font-weight: bold;
          }
        }
      }
      .cartOrder {
        width: 200px;
        display: flex;
        cursor: pointer;
        .left {
          width: 112px;
          height: 100%;
          background: #ff2832;
          border: 2px solid #ff2832;
          box-sizing: border-box;
          padding-left: 10px;
          &:hover {
            background: #f6f6f6;
            border: 2px solid #dcdcdc;
            span {
              color: #ff2832;
            }
          }
          span {
            color: #fff;
            font-weight: bold;
            font-size: 14px;
          }
          .icon-cart {
            font-size: 20px;
          }
        }
        .right {
          width: 88px;
          height: 100%;
          text-align: center;
          line-height: 40px;
          background: #f6f6f6;
          border: 2px solid #dcdcdc;
          border-left: none;
          box-sizing: border-box;
          span {
            font: 14px/36px 'Microsoft Yahei';
            &:hover {
              color: #ff2832;
            }
          }
        }
      }
    }
  }
}
.login_link:hover {
  cursor: pointer;
}
</style>
